import {
	DestroyRef,
	Directive, ElementRef, EventEmitter, Input, OnInit, Output, inject
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent, timer } from 'rxjs';
import { debounce, distinctUntilChanged } from 'rxjs/operators';

/**
 * @see https://www.leonelngande.com/creating-a-delayed-input-directive-in-angular/
 */
@Directive({
	selector: '[appDelayedInput]'
})
export class DelayedInputDirective implements OnInit {
	readonly destroyRef = inject(DestroyRef);

	@Input() delayTime = 500;
	@Output() delayedInput = new EventEmitter<Event>();

	constructor(private elementRef: ElementRef<HTMLInputElement>) {
	}

	ngOnInit() {
		fromEvent(this.elementRef.nativeElement, 'input')
			.pipe(
				debounce(() => timer(this.delayTime)),
				distinctUntilChanged(
					(prev, curr) =>  prev == curr,
					(event: Event) => (event.target as HTMLInputElement).value
				),
				takeUntilDestroyed(this.destroyRef)
			)
			.subscribe(e => this.delayedInput.emit(e));
	}
}